{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }

    .xm-body {
        height: 400px !important;
        overflow-y: scroll !important;
    }

    .layui-form-selected dl {
        height: 200px !important;
        overflow-y: scroll !important;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 20px">
                <br><br>
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <input type="hidden" id="id" name="id" value="{$data.id? $data.id : 0}"/>
                    <div class="layui-form-item ">
                        <label class="layui-form-label">上级分类</label>
                        <div class="layui-input-block" lay-verify='cate_id'>
                            <div id="demo1" class="xm-select-demo"></div>
                            <input name="pid" id="cate_id" type="hidden" value="0">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">操作名</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="required" placeholder="操作名" autocomplete="off" class="layui-input" value="{$data.title?$data.title:''}">
                        </div>
                    </div>
                    <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">应用/插件名</label>-->
                    <!--<div class="layui-input-block">-->
                    <!--<input type="text" name="app_name"  placeholder="(非必填)规则所属应用名字或插件名字" autocomplete="off" class="layui-input" value="{$data.app_name?$data.app_name:''}">-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限分类</label>
                        <div class="layui-input-block">
                            {if !empty($data.type)}
                            <input type="radio" name="type" value="system" lay-filter="beshared" title="系统" {$data.type=='system' ? 'checked':'' } >
                            <input type="radio" name="type" value="system_plugin" lay-filter="beshared" title="系统插件" {$data.type=='system_plugin' ? 'checked':'' }>
                            <!--<input type="radio" name="type" value="app" lay-filter="beshared" title="应用" {$data.type=='app' ? 'checked':'' }>-->
                            {else/}
                            <input type="radio" name="type" value="system" lay-filter="beshared" title="系统" checked>
                            <input type="radio" name="type" value="system_plugin" lay-filter="beshared" title="系统插件">
                            <!--<input type="radio" name="type" value="app" lay-filter="beshared" title="应用">-->
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item" id="miniapp" {if (empty($data.type)||$data.type=='system_plugin'||$data.type=='system') } style="display: none" {/if}>
                    <label class="layui-form-label">应用</label>
                    <div class="layui-input-block">

                        <select name="miniapp_name" id="miniapp_name" lay-filter="miniapp_name">
                            <option value="">请选择</option>
                            {if !empty($data.app_name)}
                            {volist name="miniapp" id="vo" key="k"}
                            <option value="{$vo.dir}" {eq name="vo.dir" value="$data.app_name" } selected="" {/eq}>{$vo.title}</option>
                            {/volist}
                            {else/}
                            {volist name="miniapp" id="vo" key="k"}
                            <option value="{$vo.dir}">{$vo.title}</option>
                            {/volist}
                            {/if}
                        </select>

                    </div>
            </div>

            <div class="layui-form-item" id="plugin" {if (empty($data.type)||($data.type=='system')||($data.type=='app')) } style="display: none" {/if}>
            <label class="layui-form-label">插件</label>
            <div class="layui-input-block">

                <select name="plugin_name" id="plugin_name" lay-filter="plugin_name">
                    <option value="">请选择</option>
                    {if !empty($data.app_name)}
                    {volist name="plugin" id="vo" key="k"}
                    <option value="{$vo.name}" {eq name="vo.name" value="$data.app_name" } selected="" {/eq}>{$vo.title}</option>
                    {/volist}
                    {else/}
                    {volist name="plugin" id="vo" key="k" }
                    <option value="{$vo.name}">{$vo.title}</option>
                    {/volist}
                    {/if}
                </select>

            </div>
        </div>


        <input type="hidden" name="app_name" id="app_name" value="{$data.app_name?$data.app_name:'manage'}">


        <div class="layui-form-item">
            <label class="layui-form-label">路由URL</label>
            <div class="layui-input-block">
                <input type="text" name="menu_path" lay-verify="required" placeholder="  对应：   Route::xxx([ 路由URL ], 'xxx.xxx/xxx'); " autocomplete="off" class="layui-input" value="{$data.menu_path?$data.menu_path: ''}" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实URL</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="  对应：   Route::xxx('xxxxxx/xxx', [ 真实URL ]); " autocomplete="off" class="layui-input" value="{$data.name?$data.name: ''}" lay-verify="required">
            </div>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">权限标识</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input type="text" name="auth_name" lay-verify="required" placeholder="英文唯一标识 全小写 多值“_”隔开"   onkeyup="this.value=this.value.replace(/[^\w_\/\.]/g,'');" autocomplete="off" class="layui-input" value="{$data.auth_name?$data.auth_name: ''}">-->
        <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">参数</label>
            <div class="layui-input-block">
                <input type="text" name="param" placeholder="参数名，多值&拼接，例如：id=2&code=20" autocomplete="off" class="layui-input" value="{$data.param?$data.param:''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设为菜单</label>
            <div class="layui-input-block">
                {if isset($data.ismenu)}
                <input type="radio" name="ismenu" value="0" lay-filter="ismenu" title="节点" {$data.ismenu==0 ? 'checked':'' } >
                <input type="radio" name="ismenu" value="1" lay-filter="ismenu" title="菜单" {$data.ismenu==1 ? 'checked':'' }>
                {else/}
                <input type="radio" name="ismenu" value="0" lay-filter="ismenu" title="节点" checked>
                <input type="radio" name="ismenu" value="1" lay-filter="ismenu" title="菜单">
                {/if}
            </div>
        </div>
        <div class="layui-form-item" {if empty($data.ismenu)||$data.ismenu!='1' } style="display: none" {/if} id="target">
        <label class="layui-form-label">target属性</label>
        <div class="layui-input-block">
            <!--<input type="text" name="target"  placeholder="选填：_self , _blank , _parent , _top"  onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" autocomplete="off" class="layui-input" value="{$data.target?$data.target:''}">-->

            <select name="target">
                <!--<option value="">请选择</option>-->
                {if !empty($data.target)}
                <option value="_self" {eq name="'_self'" value="$data.target" } selected="" {/eq} >_self</option>
                <option value="_blank" {eq name="'_blank'" value="$data.target" } selected="" {/eq} >_blank</option>
                <option value="_parent" {eq name="'_parent'" value="$data.target" } selected="" {/eq} >_parent</option>
                <option value="_top" {eq name="'_top'" value="$data.target" } selected="" {/eq} >_top</option>
                {else/}
                <option value="_self" selected="">_self</option>
                <option value="_blank">_blank</option>
                <option value="_parent">_parent</option>
                <option value="_top">_top</option>
                {/if}


            </select>
        </div>
    </div>
    <div class="layui-form-item" {if empty($data.ismenu)||$data.ismenu!='1' } style="display: none" {/if} id="icon_name">
    <label class="layui-form-label">菜单icon</label>
    <div class="layui-input-inline">
        <input type="text" name="icon" id="icon" placeholder="" autocomplete="off" class="layui-input" value="{$data.icon?$data.icon:''}">
    </div>
    <div class="layui-form-mid layui-word-aux">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="getNum()">选择图标</button>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">是否启用</label>
    <div class="layui-input-block">
        {if isset($data.status)}
        <input type="radio" name="status" value="0" title="禁用" {$data.status==0 ? 'checked':'' } >
        <input type="radio" name="status" value="1" title="启用" {$data.status==1 ? 'checked':'' }>
        {else/}
        <input type="radio" name="status" value="0" title="禁用">
        <input type="radio" name="status" value="1" title="启用" checked>
        {/if}
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
        <input type="text" name="remark" placeholder="备注" autocomplete="off" class="layui-input" value="{$data.remark?$data.remark:''}">
    </div>
</div>
<!--排序-->
<div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
        <input type="number" name="sort" placeholder="请输入排序" class="layui-input" value="{$data.sort? $data.sort : 0}" lay-verify='required'>
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
    </div>
</div>
</form>
<br><br>
</div>
</div>
</div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate, manage, xmSelect, eleTree;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate', 'manage', 'xmSelect', 'eleTree'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;
        manage = layui.manage;
        xmSelect = layui.xmSelect;
        eleTree = layui.eleTree;

        //添加时间 日期时间选择器
        laydate.render({
            elem: '#add_time'
            , type: 'datetime'
        });


        var uploadInst = bw_upload(upload, 'pic');//图标上传

//分类下拉单选---------------------------------------------------  start

        var cate_id = '{$pid? $pid : 0}';

        manage.getNodeTree({
            checked_ids: cate_id,
            disabled: '0',
            return_type:'old_json'
        }).then(function (response) {
            var top_data = {
                id: 0,
                pid: 0,
                label: '顶级节点',
                checked: false
            };
            if (cate_id == '0') {
                top_data.checked = true;
            }
            response.data.unshift(top_data);
            console.log(response.data);
            //先渲染多选
            var demo1 = xmSelect.render({
                el: '#demo1',
                theme: {
                    color: '#5FB878',
                },
                content: '<div id="ele1" lay-filter="ele1"></div>',
            })


//渲染自定义内容
            var ele = layui.eleTree.render({
                elem: '#ele1',
                data: response.data,
                showCheckbox: true, //展示复选框
                highlightCurrent: true, //选中高亮
                defaultExpandAll: false,//默认全部展开
                checkStrictly: true, //严格按照父子不关联
                renderAfterExpand: false //未展开也渲染子节点数据
            });


//初始化数据---------------------------------------------end


            //初始化选中数据需要后台的树菜单传入checked : true属性
            var arr = ele.getChecked(false, true);

            console.log(arr);
            var value = new Array();
            for (i = 0; i < arr.length; i++) {
                value.push(arr[i].id);
            }
            demo1.update({
                prop: {
                    name: 'label',
                    value: 'id',
                },
                initValue: value,
                data: arr,
            }).setValue(arr)
            $('#cate_id').val(value.toString());

            //初始化数据---------------------------------------------end


//监听下拉多选的选择
            demo1.update({
                on({arr, change, isAdd}) {
                    if (isAdd === false) {
                        //监听取消
                        ele.setChecked(arr.map(item => item.id), true);
                        var value = 0;
                        for (i = 0; i < arr.length; i++) {
                            value = arr[i].id;
                        }
                        $('#cate_id').val(value.toString());
                    }
                },
            });
//监听树的选择
            layui.eleTree.on("nodeChecked(ele1)", function (d) {


                var arr = ele.getChecked(false, false)
                console.log(arr);
                var arr1 = arr.pop();
                var value = arr1;
                ele.setChecked([], true);
                console.log(value);
                if (value) {
                    $('#cate_id').val(value.id);
                } else {
                    $('#cate_id').val('0');
                }

                demo1.update({
                    prop: {
                        name: 'label',
                        value: 'id',
                    },
                    data: [arr1],
                }).setValue([arr1])
                $(".xm-body").addClass("dis");

            })

        });

//分类下拉单选---------------------------------------------------  end

        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if (!data.pid) {
                layer.msg('请选择父级不能为空', {icon: 2});
                return false
            }
            if (!data.status) {
                layer.msg('是否有效不能为空', {icon: 2});
                return false
            }
            if (!data.name) {
                layer.msg('url不能为空', {icon: 2});
                return false
            }
            // if(!data.auth_name) {layer.msg('规则唯一标识不能为空', {icon: 2});return false}
            if (!data.title) {
                layer.msg('规则名不能为空', {icon: 2});
                return false
            }
            //
            if (data.type) {
                switch (data.type) {
                    case 'system_plugin':
                        if (!data.plugin_name) {
                            layer.msg('插件名不能为空', {icon: 2});
                            return false
                        }
                        break;
                    case 'app':
                        if (!data.miniapp_name) {
                            layer.msg('应用名不能为空', {icon: 2});
                            return false
                        }
                        break;
                }

            }

            delete data['eleTree-node'];
            delete data.select;
            var post_url = "{:Url('add')}";
            if (data['id'] != 0) {
                post_url = "{:Url('edit')}";

            }
            //console.log(data);return false;
            //ajax调用后台接口
            bwajax.post(post_url, data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();

                    } else {
                        layer.msg(response.data.msg, {icon: 2});

                    }
                })

            return false;
        })


        form.on('radio(ismenu)', function (data) {
            switch (data.value) {
                case '1':
                    $("#target").show();
                    $("#icon_name").show();

                    break;
                case '0':
                    $("#target").hide();
                    $("#icon_name").hide();
                    break;
            }
        })
        //单选监听
        form.on('radio(beshared)', function (data) {
            // alert(data.value);

            switch (data.value) {
                case 'system_plugin':
                    $("#miniapp").hide();
                    $("#plugin").show();
                    break;
                case 'app':
                    $("#miniapp").show();
                    $("#plugin").hide();
                    break;
                default:
                    $("#miniapp").hide();
                    $("#plugin").hide();
                    $('#app_name').val('manage');
            }
            $("#miniapp_name").val('');
            $("#plugin_name").val('');
            form.render("select");
            // form.render();
        })
        //下拉监听应用
        form.on('select(miniapp_name)', function (data) {
            // 监听事件
            $('#app_name').val(data.value);
        });
        //下拉监听插件
        form.on('select(plugin_name)', function (data) {
            // 监听事件
            $('#app_name').val(data.value);
        });
    });

    function submitSuccess() {
        // parent.location.reload();//这里调用的是父页面的reload方法
        setTimeout(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }, 1000);
    }

    //粉丝
    function getNum() {

        layer.open({
            type: 2,
            title: '图标列表',
            shade: 0.8,
            //closeBtn: 0, //不显示关闭按钮
            shade: [0],
            shadeClose: true,//单机空白处消失
            maxmin: true,
            //anim: 4, //动画类型
            area: ['40%', '90%'],
            content: "{:Url('PublicCommon/icon')}",
            btn: ['选择图标'],
            yes: function (index, layero) {

                var nodeName = window["layui-layer-iframe" + index];//父页面引用
                var icon = nodeName.getIcon();
                if (icon != false) {
                    $('#icon').val(icon);
                    layer.close(index);
                    //处理重复提交
                }
            }
        });
    }
</script>
{/block}